<template>
	<view>
		<z-paging ref="paging" v-model="list" :default-page-size="queryData.rows" @query="queryList">
			<template #top>
				<view class="header-wrap">
					<uni-nav-bar :fixed="true" backgroundColor="rgba(255,255,255,0)" :border="false" status-bar
						title="" />
					<view class="header">
						<view class="flex align-center ml-16">
							<image src="@/assets/img/my/avatar.png" class="w-24 h-24 mr-8"></image>
							{{ userInfo && userInfo.realName ? userInfo.realName : '账号' }}
						</view>
						<view class="logout-btn primary text-14 mr-12" @click="logout">
							<image src="@/assets/img/my/quit.png" class="w-20 h-20"></image>
							退出登录
						</view>
					</view>
					<view class="handle-bar">
						<view class="text-18 text-bold px-16 py-20">核销记录</view>
						<uni-segmented-control :current="current" :values="tabItems.map(item => item.text)"
							styleType="text" :activeColor="style.primary"
							@clickItem="tabChange"></uni-segmented-control>
					</view>
				</view>
			</template>
			<view class="list mx-12">
				<view class="list-item" v-for="item in list">
					<view class="flex justify-between">
						<view class="gray6 text-13">订单编号：{{ item.orderNum }}</view>
						<view class="text-13 text-bold" :class="getStatusStyle(item.status)">
							{{ getStatusText(item.status) }}</view>
					</view>
					<view class="flex mt-12">
						<image src="https://citywall.oss-cn-beijing.aliyuncs.com/img/goods/goods-1.png"
							class="w-80 h-80 radius-4 border"></image>
						<view class="flex-1 ml-8 flex flex-direction justify-between">
							<view class="text-16 text-cut-2">{{ item.productName }}</view>
							<view class="gray6 text-13">数量：×{{ item.subNum }}</view>
						</view>
					</view>
				</view>
			</view>
		</z-paging>
	</view>
</template>

<script setup>
	import {
		ref,
		computed
	} from 'vue'
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app'
	import {
		loginStore
	} from '@/store/login'
	import style from "../../assets/css/variables.module.scss"

	import {
		getConsumeList,
		getUserInfo
	} from "@/service/consume"

	onShow(async () => {
		current.value = 0
		paging.value?.reload(true);
		let [result, err] = await getUserInfo({});
		if(result) {
			userInfo.value = result
		}
	})
	
	const userInfo = ref({})
	const current = ref(0)
	const tabItems = ref([{
		text: '全部',
		value: 0,
		style: '',
	}, {
		text: '待核销',
		value: 1,
		style: 'primary',
	}, {
		text: '已核销',
		value: 2,
		style: 'success',
	}, {
		text: '已过期',
		value: 3,
		style: 'gray9',
	}, {
		text: '已退款',
		value: 4,
		style: 'error',
	}])
	const paging = ref(null)

	//获取列表
	const list = ref([])
	let queryData = ref({
		status: 0,
		page: 1,
		rows: 20
	})
	const queryList = async (pageNo, pageSize) => {
		queryData.value.page = pageNo
		if (current.value == 0) {
			delete queryData.value.status
		} else {
			queryData.value.status = tabItems.value[current.value].value
		}
		let [result, err] = await getConsumeList(queryData.value)
		if (result) {
			console.log("result.records: " + JSON.stringify(result.records));
			paging.value.complete(result.records);
		} else {
			paging.value.complete(false);
		}
	}

	const tabChange = (val) => {
		current.value = val.currentIndex
		paging.value.reload(true);
	}

	const getStatusStyle = computed(() => {
		return (status) => {
			let findItem = tabItems.value.find(item => {
				return item.value == status;
			})
			return findItem.style;
		}
	})
	const getStatusText = computed(() => {
		return (status) => {
			let findItem = tabItems.value.find(item => {
				return item.value == status;
			})
			return findItem.text;
		}
	})

	const logout = () => {
		uni.showModal({
			title: '提示',
			content: '确定退出当前账号登录吗',
			success: (res) => {
				if (res.confirm) {
					loginStore().logout()
					uni.reLaunch({
						url: '/pages/login/login'
					})
				}
			}
		})
	}
</script>

<style lang="scss">
	.header-wrap {
		width: 100%;
		// height: 360rpx;
		background: url('@/assets/img/my/header-bg.jpg') no-repeat;
		background-size: 100% 360rpx;

		.header {
			width: 100vw;
			display: flex;
			justify-content: space-between;

			.logout-btn {
				width: 192rpx;
				height: 66rpx;
				background: rgba(255, 255, 255, 0.4);
				border-radius: 12rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}

	.handle-bar {
		width: 750rpx;
		background: #FFFFFF;
		border-radius: 40rpx 40rpx 0rpx 0rpx;
		margin: 32rpx 0 24rpx 0;
	}

	.list-item {
		background: #FBFCFD;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		padding: 24rpx 32rpx;
		margin-bottom: 24rpx;
	}
</style>